<template>
    <div class="app-container">

        <div class="block">
            <div class="radio">
                排序：
                <el-radio-group v-model="reverse">
                    <el-radio :label="false">正序</el-radio>
                    <el-radio :label="true">倒序</el-radio>
                </el-radio-group>
            </div>
            <br>
            <el-timeline :reverse="reverse">
                <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp">
                    {{ activity.content }}
                </el-timeline-item>
            </el-timeline>
        </div>

        <el-table :data="unitList" v-loading="listLoading" element-loading-text="Loading" border:true fit
            highlight-current-row stripe style="width: 100%">
            <el-table-column prop="goodsListId" label="商品名称" width="120">
            </el-table-column>
            <el-table-column prop="name" label="所属店铺" width="150">
            </el-table-column>
            <el-table-column prop="sortName" label="所属菜系" width="150">
            </el-table-column>
            <el-table-column prop="goodsName" label="菜品名称" width="150">
            </el-table-column>
            <el-table-column prop="barcode" label="商品条码" width="160">
            </el-table-column>
            <el-table-column prop="leaveStock" label="剩余库存" width="120">
            </el-table-column>
            <el-table-column prop="price" label="价格" width="120">
            </el-table-column>
            <el-table-column prop="operateType" label="操作类型" width="100">
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>

<script>
// 导入api/clue.js中定义接口
import { selectAllMessage } from "@/api/message";



export default {
    filters: {
        statusFilter(status) {
            const statusMap = {
                published: "success",
                draft: "gray",
                deleted: "danger",
            };
            return statusMap[status];
        },
    },
    data() {
        return {
            unitList: [],
            shops: [],
            sortNames: [],
            listLoading: true,
            dialogFormVisible: false,
            dialogUpdateVisible: false,
            form: {
                goodsListId: "",
                name: "",
                sortName: "",
                goodsName: "",
                barcode: "",
                leaveStock: "",
                price: "",
            },
            formLabelWidth: "120px",
            currentPage: 1,
            total: 0,
            pageSize: 10,
            reverse: false,
            activities: [{
                content: '申请进行商品入库/出库操作',
                timestamp: '2024-10-13'
            }, {
                content: '通过审核',
                timestamp: '2024-10-15'
            }, {
                content: '入库/出库成功',
                timestamp: '2024-10-15'
            }]
        };
    },
    created() {
        this.fetchData();
    },
    methods: {
        fetchData(value) {
            this.listLoading = true;
            selectAllMessage({
                pageNum: this.currentPage, pageSize: this.pageSize
            }).then((response) => {
                console.log(response)
                this.unitList = response.data.list;
                this.total = response.data.total
                this.listLoading = false;
            });

        },
        searchEmp() {
            this.fetchData(this.value);
        },
        // 每页显示的记录数发生变化触发的操作
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.fetchData()

        },
        // 当前页发生变化触发的操作
        handleCurrentChange(val) {
            this.currentPage = val
            this.fetchData(this.value)
        },
    },
    // 生命周期钩子函数(vue对象创建完,自动调用该方法)
    created() {
        this.fetchData();
    }
}
</script>

<style lang="scss">
  .like {
    cursor: pointer;
    font-size: 25px;
    display: inline-block;
  }
</style>

